<template>
     <van-row>
    <van-col span="24">
      <!-- 列表项 -->
        <van-row style="margin-top: 5px;padding: 10px 0;cursor: pointer;background-color: aliceblue;" 
                v-for="order in orderList" :key="order.orderId"
               >
            <van-col :span="24">
                <van-row  @click="showOrderDetail(order.orderId)">
                    <van-col :span="22" :offset="2" >订单编号:{{order.orderNumber}}</van-col>
                </van-row>
                <van-row>
                    <van-col :span="22" :offset="2">下单时间:{{order.orderDate}}</van-col>
                </van-row>
                <van-row>
                    <van-col :span="22" :offset="2">总金额:{{order.orderTotal}}</van-col>
                </van-row>
                <van-row>
                    <van-col :span="5" :offset="19">
                        <van-button v-show="order.orderState==0" size="small" type="danger" @click="toPayOrder(order)">去支付</van-button>
                        <van-button v-show="order.orderState==1" size="small" type="primary" disabled>已支付</van-button>
                    </van-col>
                </van-row>
            </van-col>
        </van-row>

        <div style="height: 100px;"></div>
    </van-col>
  </van-row>
</template>
<script setup>
    import { ref,getCurrentInstance, onMounted } from 'vue';
    import { showNotify } from 'vant';

    const {proxy} = getCurrentInstance();

    
    let orderList=ref([]);
    //先进行查询订单
    //订单查询完之后就开始，进行循环打印
    const getOrderByUserId=()=>{
        proxy.$axios({
            method:'get',
            url:'/order/user/'+userId.value
        }).then(res=>{
            let resultBean=res.data;
            if(resultBean.code==200) {
                showNotify({message:'查询成功'})
                orderList.value=resultBean.data;
                console.log(orderList.value)
            } else {
                showNotify({message:resultBean.msg});
            }
        }).catch(error=>{
            showNotify({message:error.message});
        })
    }
    const toPayOrder=(order)=>{
        let obj=Object.assign({},order);
        obj.orderState=1;
        console.log(obj);
        proxy.$axios({
            method:'put',
            url:'/order/update',
            data:obj
        }).then(res=>{
            let resultBean=res.data;
            if(resultBean.code==200) {
                showNotify({message:'更新支付状态成功'})
                order.orderState=1;
            } else {
                showNotify({message:resultBean.msg});
            }
        }).catch(error=>{
            showNotify({message:error.message});
        })
    }
    const showOrderDetail=(orderId)=>{
        proxy.$router.push('/main/orderDetail/'+orderId)
    }
    const userId=ref(null);
    onMounted(()=>{
        userId.value=1;
        getOrderByUserId();
    })
</script>